<template>
	<div>
		<div class="info">
			<section>{{content}}</section>
		</div>
		<div class="loading">
			<loading :show="show1" style='z-index: 99;' :text="text1"></loading>
		</div>
		<seller-tap>
			<span slot='font'>我的商品</span>
			<a href="#/seller" class="fa fa-chevron-left" slot='a'></a>
		</seller-tap>

		<div class="xu">
			<div>
				<span>排序：</span>
				<span @click="up">默认</span>
				<span>价格
					<i @click="up" v-if="xu" class="fa fa-long-arrow-up"></i>
					<i  @click="down" v-if="!xu" class="fa fa-long-arrow-down"></i>
				</span>
			</div>
		</div>

		<div class="main">

			<div class="right">

				<ul>
					<li v-for='(item,ins) in data' :key='ins'>
						<a style="cursor: pointer;" @click="change" :ins='ins' :goodid='item._id'>
							<img :src="'http://localhost:2200' + item.avatar[0]" />
						</a>
						<p><span>{{item.name}}</span> <span>{{item.category | cate}}</span></p>
						<p class="describe">{{item.describe}}</p>
						<p><span>￥ {{item.price}}</span></p>
						<!--<div @click="plusShop" :value='ins'>加入<i @click.stop="plusShop" :value='ins' class="fa fa-shopping-cart"></i></div>-->
						<div>
							<button @click="remove" :ins='ins' :goodid='item._id'>下架</button>

							<button @click="change" :ins='ins' :goodid='item._id'>编辑</button>
						</div>

					</li>
				</ul>
			</div>
		</div>

	</div>
</template>

<script>
	import $ from 'jquery';
	import { mapState, mapGetters } from 'vuex'
	import axios from 'axios'
	import { Loading } from 'vux'
	import SellerTap from '../components/SellerTap'
	export default {
		data: function() {
			return {

				data: [],
				xu: false,
				start: '',
				end: '',
				has: false,
				add: 0,
				page: 1,
				content: '',
				show1: true,
				text1: 'loading'

			}

		},
		components: {
			SellerTap,
			Loading
		},

		filters: {
			cate: function(value) {
				var categorys = [
					['life', '生活用品'],
					['phone', '手机'],
					['computer', '电脑'],
					['dress', '服饰鞋帽'],
					['dresser', '美妆洗护'],

					['digital', '平板数码'],
					['household', '家电'],

					['wrap', '箱包礼品']
				];
				
				for(var i = 0;i<categorys.length;i++){
					if(categorys[i][0]==value){
						
						return categorys[i][1];
					}
				}
				
			
			},
		},
		computed: {
			...mapState([
				'seller', 'categorys', 'buller'
			])
		},
		methods: {
			
			change(ev) {

				var id = $(ev.currentTarget).attr('goodid');
				axios.get('/seller/change?id=' + id).then((result) => {

					if(result.data == 'success') {

						location.href = '#/seller/changeGood'
					}

				}).catch((err) => {
					console.log(err);
				})

			},
			remove(ev) {
				var id = $(ev.currentTarget).attr('goodid');
				axios.get('/seller/remove?id=' + id).then((result) => {

					if(result.data == 'success') {
						this.content = '下架成功';
						var ins = Number($(ev.currentTarget).attr('ins'));
						this.data.splice(ins, 1);
						$('.info').fadeIn();
						setTimeout(function() {
							$('.info').fadeOut();
						}, 1200)
					}

				}).catch((err) => {
					console.log(err);
				})
			},

			up: function() {
				this.start = '';
				this.end = '';
				this.page = 1;
				this.has = false;
				this.xu = false;
				var that = this;
				axios.get('/seller/myGoods?sheng=true').then(function(result) {

					that.data = result.data.data
				}).catch(function(err) {
					console.log(err)
				})

			},
			down: function() {
				this.start = '';
				this.end = '';
				this.page = 1;
				this.has = false;
				this.xu = true;
				var that = this;
				axios.get('/seller/myGoods?sheng=false').then(function(result) {

					that.data = result.data.data
				}).catch(function(err) {
					console.log(err)
				})

			},
			plusShop: function(ev) {
				//				console.log(this.$route) 当前路由

				var ins = Number($(ev.target).attr('value'));
				var that = this;
				console.log(ins)
				var shop = {
					num: 1,
					price: that.data[ins].price,
					name: that.data[ins].name,
				};
				axios.post('/seller/mai', shop).then(function(result) {

					console.log(result.data);

				}).catch(function(err) {
					console.log(err)
				})

			},

			
		
			
		
		},

		mounted: function() {

			var that = this;
			axios.get('/seller/myGoods').then(function(result) {

				that.data = result.data.data;
				//				console.log(result.data.data)

			}).catch(function(err) {
				console.log(err)
			})



			$(document).on('scroll', window, function() {
				var countH = $(document).outerHeight();
				var scrH = $(window).scrollTop();
				var winH = $(window).height();
				//				console.log(countH, winH, scrH);
				if(!that.has) {

					if((scrH + winH) > (countH - 3)) {
						that.page += 1;

						that.has = true;

						axios.get("/seller/myGoods?page=" + that.page + '&sheng=' + !that.xu + '&start=' + that.start + '&end=' + that.end).then(function(result) {
							$('.loading').fadeIn();
							setTimeout(function() {
								$('.loading').fadeOut(function() {
									result.data.data.forEach(function(item) {

										that.has = false;
										that.data.push(item);
									})
								});
							}, 500)

						}).catch(function(err) {
							console.log(err)
						})

					}
				}

			})

		},

	}
</script>

<style scoped>
	.fen1 {
		padding: 5px 10px;
		background: #eee;
	}
	
	.fen1 span {
		color: red;
	}
	
	.xu {
		margin: 20px 20px;
		padding: 3px 10px;
		background: #eee;
		overflow: hidden;
	}
	
	.xu div {
		float: right;
		cursor: pointer;
	}
	
	.xu div span:nth-child(2) {
		color: red;
		cursor: pointer;
	}
	
	.xu div i {
		display: inline-block;
		padding: 0 3px;
		cursor: pointer;
	}
	
	.main {
		padding: 10px;
	}
	
	.main .left {}
	
	.main .left div {
		color: red;
		cursor: pointer;
	}
	
	.main .left div,
	.main .left p {
		width: 50%;
		margin: 10px 0;
		background: #eee;
		cursor: pointer;
	}
	

	
	.right ul {
		padding: 0;
		margin: 0;
		list-style: none;
		overflow: hidden;
	}
	
	.right ul li {
		float: left;
		width: 45%;
		height: 204px;
		margin: 2%;
		margin-right: 1.5%;
		margin-bottom: 10px;
		padding: 10px 5px;
		background: #EEEEEE;
		transition: all .3s;
		border: solid beige;
		position: relative;
	}
	
	.right ul li:hover {
		transform: translateY(-5px);
		box-shadow: 0 0 5px #777;
	}
	
	.right ul li img {
		display: block;
		width: 60%;
		margin: 0 auto;
		height: 80px;
	}
	
	.right ul li p {
		margin-top: 7px;
		line-height: 16px;
		height: 16px;
		padding: 0;
	}
	
	.right ul li p:nth-child(2) {
		overflow: hidden;
		position: relative;
	}
	
	.right ul li p:nth-child(2) span:first-child {
		float: left;
		/*background: wheat;*/
		width: 50%;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	
	.right ul li p:nth-child(2) span:last-child {
		position: absolute;
		top: 0;
		right: 0;
		background: burlywood;
		color: #FFFFFF;
		padding: 0 3px;
		font-size: 10px;
	}
	
	.right ul li p:nth-child(3) {
		color: darkcyan;
		font-size: 13px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	
	.right ul li p:nth-child(4) span:first-child {
		color: red;
	}
	
	.right ul li div {
		/*border: solid 3px gray;*/
		background: wheat;
		color: orangered;
		text-align: center;
		overflow: hidden;
		position: absolute;
		bottom: 0;
		width: 100%;
		left: 0%;
		padding: 4px 10px;
	}
	
	.right ul li div button {
		border: none;
		float: left;
		color: white;
		width: 50px;
		line-height: 25px;
		background: salmon;
		cursor: pointer;
	}
	
	.right ul li div button:last-child {
		float: right;
	}
	
	.info {
		position: fixed;
		z-index: 20;
		width: 100%;
		display: none;
		height: 100%;
		background: rgba(0, 0, 0, .4);
	}
	
	.info section {
		width: 120px;
		line-height: 120px;
		text-align: center;
		position: absolute;
		top: 200px;
		left: 33%;
		z-index: 50;
		border-radius: 20%;
		background: rgba(0, 0, 0, .8);
		color: white;
	}
	
	.loading {
		position: absolute;
		/*background: rgba(0,0,0,.5);*/
		width: 100%;
		height: 100%;
		z-index: 200;
		display: none;
	}
</style>